<template>
  <div id="container"></div>
</template>
 
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
let amp = null;
export default {
  props: {
    query: {
      default: () => ({})
    }
  },
  data() {
    return {};
  },
  methods: {
    initMap(latitude, longitude) {
      const {
        query: { userName, specificDate, clockOffTime, weekDay, stnm, location, coordinate = [39.916296, 116.410344] }
      } = this.$props;
      const [lag, lat] = coordinate.split('/').reverse();
      AMapLoader.load({
        key: '9e005a1a3c0301babc2e71f27a686fad',
        version: '2.0',
        c: []
      })
        .then((AMap) => {
          amp = new AMap.Map('container', {
            viewMode: '2D',
            zoom: 15,
            center: [lag, lat]
          });
          // 添加标记到地图上
          const marker = new AMap.Marker({
            position: [lag, lat], // 标记位置
            title: `${userName}于${specificDate}  ${clockOffTime}(${weekDay})在${stnm}${location}打卡` // 标记名称
          });
          marker.setMap(amp);
          AMap.plugin('AMap.ToolBar', function () {
            var toolbar = new AMap.ToolBar();
            amp.addControl(toolbar);
          });
          AMap.plugin('AMap.ControlBar', function () {
            var controlBar = new AMap.ControlBar();
            amp.addControl(controlBar);
          });
        })
        .catch((e) => {
          console.log(e);
        });
    }
  },
  mounted() {
    this.initMap();
  },
  unmounted() {
    if (amp) {
      amp.destroy(); // 销毁地图对象
      amp = null;
    }
  }
};
</script>
 
<style scoped>
#container {
  width: 100%;
  height: 100%;
}
</style>